<script lang="tsx">
import type { CSSProperties } from 'vue'

import { computed, defineComponent, unref, toRef } from 'vue'

import { BasicMenu } from '@/components/Menu'
import { SimpleMenu } from '@/components/SimpleMenu'
import { AppLogo } from '@/components/Application'
import { MenuModeEnum, MenuSplitTyeEnum } from '@/enums/menuEnum'
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
import { ScrollContainer } from '@/components/ScrollContainer'
import { useGo } from '@/hooks/web/usePage'
import { useRootSetting } from '@/hooks/setting/useRootSetting'
import { useAppInject } from '@/hooks/web/useAppInject'
import { useDesign } from '@/hooks/web/useDesign'

import { useSplitMenu } from './useLayoutMenu'

export default defineComponent({
  name: 'LayoutMenu',
  props: {
    splitType: {
      type: Number as PropType<MenuSplitTyeEnum>,
      default: MenuSplitTyeEnum.NONE,
    },

    isHorizontal: Boolean,
    //  menu Mode
    menuMode: {
      type: String as PropType<Nullable<MenuModeEnum>>,
      default: '',
    },
  },
  setup(props) {
    const go = useGo()

    const { getMenuMode, getMenuType, getCollapsed, getCollapsedShowTitle, getAccordion, getIsHorizontal, getIsSidebarType, getSplit } = useMenuSetting()
    const { getShowLogo } = useRootSetting()

    const { prefixCls } = useDesign('layout-menu')

    const { menusRef } = useSplitMenu(toRef(props, 'splitType'))

    const { getIsMobile } = useAppInject()

    const getComputedMenuMode = computed(() => (unref(getIsMobile) ? MenuModeEnum.INLINE : props.menuMode || unref(getMenuMode)))

    const getIsShowLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType))

    const getUseScroll = computed(() => {
      return !unref(getIsHorizontal) && (unref(getIsSidebarType) || props.splitType === MenuSplitTyeEnum.LEFT || props.splitType === MenuSplitTyeEnum.NONE)
    })

    const getWrapperStyle = computed((): CSSProperties => {
      return {
        height: `calc(100% - ${unref(getIsShowLogo) ? 'var(--header-height)' : '0px'})`,
      }
    })

    const getLogoClass = computed(() => {
      return [
        `${prefixCls}--logo`,
        {
          [`${prefixCls}--mini`]: unref(getCollapsed),
          [`${prefixCls}--mobile`]: unref(getIsMobile),
        },
      ]
    })

    const getCommonProps = computed(() => {
      const menus = unref(menusRef)
      return {
        menus,
        items: menus,
        accordion: unref(getAccordion),
        collapse: unref(getCollapsed),
        collapsedShowTitle: unref(getCollapsedShowTitle),
        onMenuClick: handleMenuClick,
      }
    })
    /**
     * click menu
     * @param menu
     */

    function handleMenuClick(path: string) {
      go(path)
    }

    function renderHeader() {
      if (!unref(getIsShowLogo) && !unref(getIsMobile)) return null

      return <AppLogo showTitle={!unref(getCollapsed)} class={unref(getLogoClass)} />
    }

    function renderMenu() {
      const { menus, ...menuProps } = unref(getCommonProps)
      if (!menus || !menus.length) return null
      return !props.isHorizontal ? (
        <SimpleMenu {...menuProps} isSplitMenu={unref(getSplit)} items={menus} />
      ) : (
        <BasicMenu
          {...(menuProps as any)}
          isHorizontal={props.isHorizontal}
          type={unref(getMenuType)}
          showLogo={unref(getIsShowLogo)}
          mode={unref(getComputedMenuMode as any)}
          items={menus}
        />
      )
    }

    return () => {
      return (
        <>
          {renderHeader()}
          {unref(getUseScroll) ? <ScrollContainer style={unref(getWrapperStyle)}>{() => renderMenu()}</ScrollContainer> : renderMenu()}
        </>
      )
    }
  },
})
</script>

<style lang="scss">
$prefix-cls: '#{$tonyname}-layout-menu';

.#{$prefix-cls} {
  &--logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--header-height);
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    background: var(--sider-background-color);

    > img {
      width: calc(var(--header-height) - 24px);
      height: calc(var(--header-height) - 24px);
    }

    > span {
      font-size: 18px;
      color: #fff;
    }
  }

  &--mobile {
    .#{$tonyname}-app-logo {
      &__title {
        opacity: 1;
      }
    }
  }
}
</style>
